<template>
	<view class="page-wrap">
		<!-- #ifdef APP-PLUS-NVUE -->
		<scroller ref="page-scroll" class="page-scroll" :show-scrollbar="false" @scroll="pageScroll">
		<!-- #endif -->
		<!-- #ifndef APP-PLUS-NVUE -->
		<scroll-view ref="page-scroll" class="page-scroll" :show-scrollbar="false" :scroll-y="true" :scroll-top="pageScrollTop" @scroll="productVideo.pageScroll">
		<!-- #endif -->
			<view class="page">
				<tpf-nav-bar status-bar fixed float hasTitle :fixedHeight="navBarConfig.fixedHeight" @getNavBarMaxHeight="getNavBarMaxHeight">
					<view class="nav-bar-bg" :style="{opacity: navBarBgOpacity}"></view>
					
					<view slot="left" class="nav-bar-left">
						<view class="nav-bar-left-icon"  :style="{'background-color': navBarSideIconBgColor}" v-for="(leftIcon, leftIconIndex) of navBarConfig.left.iconList" :key="leftIconIndex" @tap="navBarLeftIconTap(leftIcon.id)">
							<text class="nav-bar-left-icon-text" :style="{'font-family': navBarConfig.left.fontFamily, color: navBarSideIconTextColor, opacity: navBarSideIconTextOpacity}">{{leftIcon.text}}</text>
						</view>
						<view v-if="showCloseVideoBtn" class="close-video-btn">
							<uni-icons :type="navBarConfig.left.closeVideoBtn.type" :size="navBarConfig.left.closeVideoBtn.size" :color="navBarConfig.left.closeVideoBtn.color" @click="colseVideoBtnTap"></uni-icons>
						</view>
					</view>
					
					<view slot="title" class="nav-bar-title" :style="{opacity: navBarTitleOpacity}">
						<view class="nav-bar-title-icon-wrap" v-for="(title, titleIconIndex) of navBarConfig.title.list" :key="titleIconIndex" @tap="navBarTitlteIconTap(titleIconIndex)">
							<view  class="nav-bar-title-icon">
								<view  class="nav-bar-title-icon-text-wrap">
									<text  class="nav-bar-title-icon-text" :class="currentNavBarTitleIconIndex === titleIconIndex ? 'nav-bar-title-icon-text-selected' : ''">{{title}}</text>
								</view>
								<view :class="currentNavBarTitleIconIndex === titleIconIndex ? 'nav-bar-title-icon-line' : ''"></view>
							</view>
						</view>
					</view>
					
					<view slot="right" class="nav-bar-right">
						<view class="nav-bar-right-icon"  :style="{'background-color': navBarSideIconBgColor}" v-for="(rightIcon, rightIconIndex) of navBarConfig.right.iconList" :key="rightIconIndex">
							<text class="nav-bar-right-icon-text" :style="{'font-family': navBarConfig.right.fontFamily, color: navBarSideIconTextColor, opacity: navBarSideIconTextOpacity}">{{rightIcon.text}}</text>
						</view>
					</view>
				</tpf-nav-bar>
				
				<view id="product" ref="product" class="product">
					<!-- 产品图片及视频介绍 -->
					<view class="product-media" :style="{height: productMediaConfig.height}">
						
						<view class="product-image-swiper-wrap" v-if="!showVideo">
							<swiper  class="product-image-swiper" :style="{height: productMediaConfig.height}" :duration="200" @change="productImageChange">
								<swiper-item v-for="(image, imageIndex) of imageList" :key="imageIndex">
									<image class="product-image" :style="{height: productMediaConfig.height}" :src="image.url"></image>
								</swiper-item>
							</swiper>
							
							<view class="product-fix-btn-wrap">
								<view class="product-image-swiper-dot">
									<text class="current-image-index">{{currentImageIndex + 1}}</text>
									<text class="product-image-swiper-dot-slash">/</text>
									<text class="image-count">{{imageList.length}}</text>
								</view>
								
								<view class="play-video-btn-wrap" v-if="hasVideo">
									<view class="play-video-btn" @tap="playVideoBtnTap">
										<text class="play-video-btn-icon" :style="{'font-family': playVideoBtnConfig.fontFamily}">{{playVideoBtnConfig.text}}</text>
										<text class="video-duration-text">{{video.duration}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 产品概述，包括价格、折扣、简介 -->
					<view class="intro-section"> 
						<view class="price-section">
							<view class="price-and-discount">
								<tpl-price :price="price" :integerStyle="priceSectionConfig.price.integerStyle" :decimalStyle="priceSectionConfig.price.decimalStyle" :currencySymbolStyle="priceSectionConfig.price.currencySymbolStyle"></tpl-price>
								<view v-if="marketPrice" class="discount-price">
									<text class="discount-price-text">￥{{marketPrice}}</text>
								</view>
							</view>
							<view class="price-section-icon-list">
								<tpf-icon class="price-section-icon" :index="icon.id" v-for="(icon, iconIndex) of priceSectionConfig.iconList" :key="iconIndex" :fontFamily="priceSectionConfig.fontFamily" :title="icon.title" :titleStyle="priceSectionConfig.titleStyle+(icon.appendStyle || '')" :subtitle="icon.subtitle" :subtitleStyle="priceSectionConfig.subtitleStyle+(icon.appendStyle || '')" @iconTap="iconTap"></tpf-icon>
							</view>
						</view>
						
						<view class="product-title-section">
							<text class="product-title-text">{{title}}</text>
						</view>
					</view>
					
					<!-- 优惠和活动部分 -->
					<view class="activity-and-discount">
						<view class="activity-and-discount-discount-section">
							<view class="activity-and-discount-discount-label">
								<text class="activity-and-discount-discount-label-text">活动</text>
							</view>
							
							<view class="activity-and-discount-discount-list">
								<view class="activity-and-discount-discount" v-for="(discount, discountIndex) of discountList" :key="discountIndex">
									<view class="activity-and-discount-discount-title">
										<text class="activity-and-discount-discount-title-text">{{discount.title}}</text>
									</view>
									<view class="activity-and-discount-discount-desc">
										<text class="activity-and-discount-discount-desc-text">{{discount.desc}}</text>
									</view>
								</view>
							</view>
							
							<tpf-icon :fontFamily="moreBtnConfig.fontFamily" :text="moreBtnConfig.text" :textStyle="moreBtnConfig.textStyle" @iconTap="showPop('activity')"></tpf-icon>
						</view>
						<uni-popup ref="activity" type="bottom">
							<view class="pop-wrap activity-and-discount-activity">
								<view class="pop-title">优惠活动</view>
								<view class="pop-item">
									<view class="pop-mtit">活动</view> 
									<view class="item flex flex-align-center" v-for="(discount, discountIndex) of discountList" :key="discountIndex">
										<view class="label">{{discount.title}}</view>
										<view class="desc">{{discount.desc}}</view>
									</view>
								</view>
								<view class="pop-item">
									<view class="pop-mtit">优惠劵</view>
									<view class="coupon-list">
										<view class="item coupon-item flex flex-align-center">
											<view class="coupon-info">
												<view class="coupon-title">￥<text class="price">5</text>店铺优惠劵</view>
												<view class="coupon-msg">满100元可用</view>
												<view class="expd">有效期 2020.5.1-2020.6.1</view>
											</view>
											<view class="coupon-receive">立即领取</view>
										</view>
										<view class="item coupon-item flex flex-align-center">
											<view class="coupon-info">
												<view class="coupon-title">￥<text class="price">20</text>店铺优惠劵</view>
												<view class="coupon-msg">满200元可用</view>
												<view class="expd">有效期 2020.5.1-2020.6.1</view>
											</view>
											<view class="coupon-receive">立即领取</view>
										</view>
										<view class="item coupon-item flex flex-align-center">
											<view class="coupon-info">
												<view class="coupon-title">￥<text class="price">50</text>店铺优惠劵</view>
												<view class="coupon-msg">满500元可用</view>
												<view class="expd">有效期 2020.5.1-2020.6.1</view>
											</view>
											<view class="coupon-receive">立即领取</view>
										</view>
									</view>
									<view class="pop-sure-btn" @tap="closePop('activity')">确定</view>
								</view>
							</view>
						</uni-popup>
					</view>
					
					<!-- 已选商品及商品配送信息 -->
					<view class="order-info">
						<view class="list-item bottom-border">
							<view class="list-item-label">
								<text class="list-item-label-text">已选</text>
							</view>
							<view class="list-item-detail">
								<text class="list-item-detail-text">{{goodsAttrStr}}</text>
							</view>
							
							<tpf-icon :fontFamily="moreBtnConfig.fontFamily" :text="moreBtnConfig.text" :textStyle="moreBtnConfig.textStyle" @iconTap="showPop('cart')"></tpf-icon>
							<uni-popup ref="cart" type="bottom">
								<tpl-cart-pop :goodsThumb="goodsThumb" :price="realityPrice" :stock="stock" :stocked="Number(stocked)" :goodsAttrStr="goodsAttrStr" :goodsAttr="goodsAttr" @settlement="settlement" @closePop="closePop"></tpl-cart-pop>
							</uni-popup>
						</view>
						<view class="list-item bottom-border">
							<view class="list-item-label">
								<text class="list-item-label-text">地址</text>
							</view>					
							<view class="list-item-detail">
								<text class="list-item-detail-text">{{address}}</text>
							</view>
							
							<tpf-icon :fontFamily="moreBtnConfig.fontFamily" :text="moreBtnConfig.text" :textStyle="moreBtnConfig.textStyle" @iconTap="showPop('address')"></tpf-icon>
							<uni-popup ref="address" type="bottom">
								<view class="pop-wrap address-activity">
									<view class="pop-title">配送地址</view>
									<view class="address-list">
										<view class="flex address-item" v-for="(item,index) of addressList" :key="index" @tap="selectAddress(item.id)">
											<tpf-icon class="pop-address-ico" :text="popConfig.adddressIcon.text" :fontFamily="popConfig.adddressIcon.fontFamily"></tpf-icon>
											<view class="flex-1 address">{{item.address}}</view>
											<tpf-icon v-if="item.selected" class="pop-address-ico" :text="popConfig.selectedIcon.text" :fontFamily="popConfig.selectedIcon.fontFamily"></tpf-icon>
										</view>
									</view>
									<navigator :url="'/pages/ucenter/address/address?trigger=detail&product_id='+list.id">
										<view class="pop-sure-btn add-address">选择其它地址</view>
									</navigator>
									<tpf-icon class="pop-close-ico" :text="popConfig.closeIcon.text" :fontFamily="popConfig.closeIcon.fontFamily" @iconTap="closePop('address')"></tpf-icon>
								</view>
							</uni-popup>
						</view>
						<view class="list-item">
							<view class="list-item-label">
								<text class="list-item-label-text">运费</text>
							</view>
							<view class="list-item-detail">
								<text class="list-item-detail-text">在线支付免运费</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 商品评价部分 -->
				<view id="comment" ref="comment" class="comment">
					<view class="comment-section">
						<view class="comment-section-label">
							<view class="comment-section-label-left">
								<text class="comment-section-label-left-text">评价</text>
								<text class="comment-section-label-left-number">{{commentTotal}}</text>
							</view>
							
							<navigator class="comment-section-label-right" :url="'/pages/comment/comment-goods?id='+list.id">
								<text class="comment-section-label-right-text">好评度</text>
								<text class="comment-section-label-right-percent">{{goodCommentPercent}}</text>
								<tpf-icon :fontFamily="arrowRightBtnConfig.fontFamily" :text="arrowRightBtnConfig.text" :textStyle="arrowRightBtnConfig.textStyle"></tpf-icon>
							</navigator>
							
						</view>
						
						<view class="product-comment-list">
							<view class="product-comment" :class="commentIndex !== commentListLength - 1 ? 'bottom-border' : ''" v-for="(comment, commentIndex) of commentList" :key="commentIndex">
								<view class="user-info">
									<image class="user-avatar" :src="comment.headimg" mode=""></image>
									<view class="nickname-and-rate">
										<view class="user-nickname">
											<text class="user-nickname-text">{{comment.username}}</text>
										</view>
										<view class="comment-rate">
											<uni-rate :value="comment.goods_rank" :disabled="true" :size="rateSize" :activeColor="rateConfig.starActivecolor"></uni-rate>
										</view>
									</view>
								</view>
								
								<view class="comment-content">
									<text class="comment-content-text">{{comment.content}}</text>
								</view>
								
								<view class="comment-image-list">
									<uni-grid :highlight="false" :showBorder="false" :column="3">
										<uni-grid-item v-for="(image, imageIndex) of comment.photos" :key="imageIndex">
											<view class="comment-image-wrap">
												<image class="comment-image" :src="image" mode=""></image>
											</view>
										</uni-grid-item>
									</uni-grid>
								</view>
								
								<view class="product-sku">
									<text class="product-sku-text">{{comment.spec_str}}</text>
								</view>
							</view>
							
							<view class="more-comment-wrap">
								<navigator class="more-comment" :url="'/pages/comment/comment-goods?id='+list.id">
									<text class="more-comment-text">查看全部评价</text>
								</navigator>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 商品详情 -->
				<view id="detail" ref="detail" class="detail">
					<view class="product-detail">
						<view class="product-detail-label">
							<view class="separator">
								<view class="short-line"></view>
								<view class="short-vertical-line"></view>
							</view>
							<text class="product-detail-label-text">详情</text>
							<view class="separator">
								<view class="short-vertical-line"></view>
								<view class="short-line"></view>
							</view>
						</view>
						
						<view class="product-detail-content">
							<view class="product-intro">
								<view class="product-intro-label">
									<text class="product-intro-label-icon" :style="{'font-family': productIntroIconConfig.fontFamily}">{{productIntroIconConfig.text}}</text>
									<text class="product-intro-label-text">商品介绍</text>
								</view>
								
								<view class="product-info">
									<view class="long-line"></view>
									<text class="product-info-text">产品信息</text>
									<view class="long-line"></view>
								</view>
								
								<view class="product-info-image-list">
									<!-- <image class="product-info-image" :style="{width: '730rpx', height: 730*productInfoImageAspectRatioList[imageIndex] + 'rpx'}" :src="image.image" mode="" v-for="(image, imageIndex) of productInfoImageList" :key="imageIndex" @load="productInfoImageLoad(imageIndex, $event)" @tap="producInfoImageTap(image.url, imageIndex)"></image> -->
									<tpf-parse :content="list.content"></tpf-parse>
								</view>
							</view>
							
							<view class="product-specification">
								<view class="product-specification-label">
									<text class="product-specification-label-icon" :style="{'font-family': productSpecificationIconConfig.fontFamily}">{{productSpecificationIconConfig.text}}</text>
									<text class="product-specification-label-text">规格参数</text>
								</view>
								
								<view class="table">
									<block v-for="(specification, specificationIndex) of specificationList" :key="specificationIndex">
										<view class="table-row">
											<view class="table-col">
												<view class="table-item">
													<text class="table-item-text">{{specification.name}}</text>
												</view>
											</view>
										</view>
										
										<view class="table-row" v-for="(item, itemIndex) of specification.children" :key="itemIndex">
											<view class="table-col">
												<view class="table-item">
													<text class="table-item-text">{{item.name}}</text>
												</view>
											</view>
											<view class="table-col">
												<view class="table-item">
													<text class="table-item-text">{{item.value}}</text>
												</view>
											</view>
										</view>
									</block>
								</view>
								
							</view>
						</view>
					</view>
				</view>
			
				<!-- 推荐 -->
				<view id="recommended" ref="recommended" class="recommended">
					<view class="recommended-product-list-title">
						<tpf-icon :fontFamily="recommendedProductListTitleConfig.lineIcon.fontFamily" :text="recommendedProductListTitleConfig.lineIcon.text" :textStyle="recommendedProductListTitleConfig.lineIcon.textStyle"></tpf-icon>
						<tpf-icon :vertical="false" :fontFamily="recommendedProductListTitleConfig.recommendIcon.fontFamily" :thumb="recommendedProductListTitleConfig.recommendIcon.thumb" :title="recommendedProductListTitleConfig.recommendIcon.title" :iconStyle="recommendedProductListTitleConfig.recommendIcon.iconStyle" :titleStyle="recommendedProductListTitleConfig.recommendIcon.titleStyle"></tpf-icon>
						<tpf-icon :fontFamily="recommendedProductListTitleConfig.lineIcon.fontFamily" :text="recommendedProductListTitleConfig.lineIcon.text" :textStyle="recommendedProductListTitleConfig.lineIcon.textStyle"></tpf-icon>
					</view>
					
					<tpl-product-list class="recommended-product-list" :columnCount="recommendedProductListConfig.columnCount" :columnGap="recommendedProductListConfig.columnGap" :rowGap="recommendedProductListConfig.rowGap" :leftGap="recommendedProductListConfig.leftGap" :rightGap="recommendedProductListConfig.rightGap" :productList="recommendedProductList"></tpl-product-list>
				</view>
				
				<!-- 加入购物车、购买、客服等导航 -->
				<view ref="good-nav" class="good-nav">
					<view class="good-nav-icon-list">
						<navigator open-type="reLaunch" hover-class="none" class="good-nav-icon" v-for="(icon, iconIndex) of goodNavConfig.iconList" :key="iconIndex" :url="icon.url">
							<tpf-icon :fontFamily="goodNavConfig.fontFamily" :text="icon.text" :textStyle="goodNavConfig.textStyle" :subtitle="icon.subtitle"></tpf-icon>
						</navigator>
					</view>
					<view class="good-nav-btn-list">
						<view class="good-nav-btn" @tap="showPop('cart')" v-for="(btn, btnIndex) of goodNavConfig.btnList" :key="btnIndex" :style="{'background-color': btn.color}">
							<text class="good-nav-btn-text">{{btn.text}}</text>
						</view>
					</view>
				</view>
			</view>
		<!-- #ifndef APP-PLUS-NVUE -->
		</scroll-view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS-NVUE -->
		</scroller>
		<!-- #endif -->
		
		<view class="video-wrap" v-if="showVideo" id="product-video" ref="product-video"  :style="{height: videoHeightDynamic + 'px', transform:' translate(' + videoTransX + 'px,' + videoTransY + 'px)'}" :data-set="JSON.stringify({videoHeight: videoHeight, videoWidth: videoWidth, videoFloatWidth: videoFloatWidth, videoFloatHeight: videoFloatHeight, videoFloatOffsetRight: videoFloatOffsetRight, videoFloatOffsetTop: videoFloatOffsetTop, navBarHeight: navBarHeight, videoScrollRate: videoScrollRate})">
			<video class="product-video" autoplay controls :src="video.src"></video>
			<view v-if="videoIsFloat" class="product-video-float-close" @tap="videoFloatCloseBtnTap">
				<view class="product-video-float-close-icon-bg"></view>
				<view class="product-video-float-close-icon">
					<uni-icons :type="navBarConfig.left.closeVideoBtn.type" :size="navBarConfig.left.closeVideoBtn.size" :color="navBarConfig.left.closeVideoBtn.color"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>


<script lang="wxs" module="productVideo">
	function pageScroll(e, ins) {
		var scrollTop = e.detail.scrollTop;
		
		ins.callMethod('pageScroll', e);
		
		var productVideo = ins.selectComponent('#product-video');
			
		if (productVideo) {
			
			var videoDataset = JSON.parse(productVideo.getDataset().set);
			
			var videoScrollRate = videoDataset.videoScrollRate;
			var navBarHeight = videoDataset.navBarHeight;
			var videoWidth = videoDataset.videoWidth;
			var videoHeight = videoDataset.videoHeight;
			var videoFloatWidth = videoDataset.videoFloatWidth;
			var videoFloatHeight = videoDataset.videoFloatHeight;
			var videoFloatOffsetTop = videoDataset.videoFloatOffsetTop;
			var videoFloatOffsetRight = videoDataset.videoFloatOffsetRight;
			
			productVideo.setStyle({
				height: scrollTop < videoHeight ? videoHeight - scrollTop*(1 - videoScrollRate) + 'px' : videoFloatHeight + 'px',
				width: scrollTop < videoHeight ? videoWidth + 'px' : videoFloatWidth + 'px',
				transform: scrollTop < videoHeight ? 'translate(0, -' + scrollTop*videoScrollRate + 'px)' : 'translate(-' + videoFloatOffsetRight + 'px, ' + (navBarHeight + videoFloatOffsetTop) + 'px)',
			})
		}
	}
	
	module.exports = {
		pageScroll: pageScroll
	}
</script>

<script src="./product-detail.js"></script>

<style lang="scss" src="./product-detail.scss"></style>
